<template>
    <view class="history_info_box">
        <view class="top"></view>
        <view class="info_box">
            <view class="single_box" v-for="(item,index) in historyDatas" :key="item.userId" @click="goOthersDetailpage(item.dynamicId)">
                <view class="avatar">
                    <image :src="item.userHeaderImage" mode="widthFix"></image>
                </view>
                <view class="info">
                    <view class="name">{{item.userNickname}}</view>
                    <view class="desc">{{item.dynamicDescribe}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {

        data() {
            return {
                historyDatas: []
            };
        },
        methods: {
            //去详情页
            goOthersDetailpage(id) {
                uni.navigateTo({
                    url: '/pages/contribute/details?id=' + id
                });
            },
            //获取token
            getToken() {
                uni.getStorage({
                    key: 'token',
                    success: res => {
                        // console.log(res)
                        let token = res.data
                        //运行请求个人数据函数
                        this.getHistoryData(token)
                    }
                })
            },
            //请求个人数据
            getHistoryData(token) {
                this.$request('/comic-time/personal/mybrowsedynamicall',{
                    "pageNo": 1,
                    "pageTol": 5
                },'GET',  {
                    'Authorization': token,
                }).then(res => {
                    console.log(res.data)
                    this.historyDatas=res.data
                });
            }
        },
        mounted() {
            this.getToken()
        }
    }
</script>

<style lang="scss" scoped>
    $hign:calc(100vh - 44px);

    .history_info_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .info_box {
            width: 750rpx;

            .single_box {
                width: 750rpx;
                height: 110rpx;
                background-color: #ffffff;
                border-bottom: 1rpx solid #e5e5e5;
                box-sizing: border-box;
                padding: 0 30rpx;
                display: flex;
                // justify-content: flex-start;
                align-items: center;

                .avatar {
                    width: 71rpx;
                    height: 71rpx;
                    background-color: #1389cd;
                    border-radius: 50%;
                    border: solid 1rpx #e5e5e5;
                    margin-right: 20rpx;
                    overflow:hidden;
                    image{
                        width: 71rpx;
                    }
                }

                .info {
                    height: 71rpx;
                    width: 71rpx;
                    flex-grow:5;
                    .name {
                        height: 31rpx;
                        font-family: PingFangSC-Medium;
                        font-size: 32rpx;
                        line-height: 31rpx;
                        color: #333333;
                        margin-bottom: 12rpx;
                    }

                    .desc {
                        height: 23rpx;
                        font-family: PingFangSC-Light;
                        font-size: 24rpx;
                        line-height: 23rpx;
                        color: #333333;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                  
                            
                    }
                }
            }
        }
    }
</style>
